import React from 'react';
import {Typography, Input, Form, Button} from 'antd';

const {Text} = Typography
import {TableComp, GlobalProvider, MoneyInput, NumberInput, ComboBox, ComponentType} from 'jh-lib';
import {map} from "lodash-es";

const data = [
    {
        key: 111,
        date: '2018-02-11',
        amount: 120,
        type: 'income1',
        note: 'transfer',
        age: '7',
        mask: '',
    },
    {
        key: 222,
        date: '2018-03-11',
        amount: 243,
        type: 'income243',
        age: 178,
        note: 'transfer',
        mask: '',
    },
    {
        key: 333,
        id: 9527,
        date: '2018-04-11',
        amount: 98,
        type: 'income98',
        note: 'transfer',
        age: 17,
        mask: '',
    },
];
const cols = [
    {
        // remark: 'Note',
        // name: 'note',
        // floatNum: '',
        // sum: false,
        // reg: '',
        // expression: '',
        // format: '',
        // align: '',
        // colWidth: 100,

        remark: 'Date',
        name: 'date',
        colWidth: 200,
        order: true,
        componentType: ComponentType.CALENDAR
    },
    {
        remark: 'Amount',
        name: 'amount',
        colWidth: 100,
        componentType: ComponentType.NUMBER_INPUT
    },
    {
        remark: 'Type',
        name: 'type',
        colWidth: 100,
        componentType: ComponentType.TEXT_INPUT
    },
    {
        remark: 'Note',
        name: 'note',
        colWidth: 100,
        componentType: ComponentType.TEXT_INPUT
    },
    {
        remark: 'age',
        key: '9527',
        name: 'age',
        colWidth: 100,
        componentType: ComponentType.NUMBER_INPUT
    },
    {
        remark: '备注',
        name: 'mask',
        colWidth: 200,
        componentType: ComponentType.TEXT_INPUT
    },
    // {
    //     remark: 'Action',
    //     name: 'action',
    //     render: () => <a>Delete</a>,
    // },
];

export default class Test extends React.Component {
    state = {
        visible: false,
        page: {
            current: 1,
            size: 20,
            total: 100,
        }
    };

    /**
     * @type {TableComp}
     */
    tableRef;

    handleCellUpdate(dataIndex, record, prevRecord, rowIndex, {list}) {
        console.log('更新', dataIndex, record, prevRecord, rowIndex);
        return record
    }

    render() {
        return (
            <>
                <GlobalProvider>
                    <TableComp
                        onRef={(ref) => {
                            this.tableRef = ref;
                        }}
                        dataSource={data}
                        columns={cols}
                        canSort={true}
                        // checkBox={true}
                        needNO={true}
                        resizable={true}
                        handleChangePnSize={(values) => {
                            console.log(values);
                            this.setState({
                                page: {
                                    current: values.current,
                                    size: values.size,
                                    total: 100,
                                }
                            })
                        }}
                        onCellUpdate={this.handleCellUpdate.bind(this)}
                        bordered={true}
                    />
                </GlobalProvider>

            </>)
    }
}
